<template>
	<view class="wrap">
		<u-navbar :title="$t('chongzhi2')" title-width="340" :border-bottom="false" back-icon-color="#fff" title-color="#fff" :background="{ backgroundColor: '#0030A8' }"></u-navbar>
		<view class="tom-container">
			<view class="Tab-main">
				<view class="listtype" @click="selectShow = true">
					<view class="left">{{$t('zclx')}}</view>
					<view class="right">
						<text>{{tokenName}}</text>
						<u-icon name="arrow-right" custom-prefix="custom-icon" size="36" color="#0032B7"></u-icon>
					</view>
				</view>
				<u-select :cancelText="$t('quxiao')" :confirmText="$t('queren')" v-model="selectShow" :default-value="defaultValue" :list="selectList" @confirm="selectOk"></u-select>
				<view class="Chainname">
					<view class="left">{{$t('lmc')}}：</view>
					<view class="right">
						<text class="state active">
							{{ userData.TokenName || 'TRC20'}}
						</text>
					</view>
				</view>
				<view class="block">
					<tki-qrcode class="img" ref="qrcode" :val="this.userData.chainAddr" :size="284" :onval="true" :loadMake="true"
					 :showLoading="true" @result="qrR" />
					<view @tap="downCode" class="download">
						<u-icon name="down" size="28rpx" custom-prefix="custom-icon"></u-icon>
						<text>{{$t('bcewm')}}</text>
					</view>
					<view class="block-name">{{userInfo.userName}}</view>
					<view class="block-address">{{userData.chainAddr | formatAddress}}</view>
					<view class="block-btn" @click="submit">{{$t('fzdz')}}</view>
				</view>
				<view class="block block2">
					<view class="block2-title">{{$t('cztx')}}</view>
					<view class="block2-text">{{$t('zxczje')}}{{userData.MinDepositAmount}}{{token}}{{$t('xywfth')}}</view>
					<view class="block2-text2">{{$t('qwxf')}}{{userData.ChainName}}{{$t('zcfz')}}</view>
					<view class="block2-text2">{{$t('nczss')}}{{userData.num ||19}}{{$t('cwldz')}}{{userData.num ||19}}{{$t('cwlktb')}}</view>
					<view class="block2-text2">{{$t('zxczje')}}{{userData.MinDepositAmount}}{{token}}{{$t('xy')}}</view>
					<view class="block2-text2">{{$t('czdzgb')}}</view>
					<view class="block2-text2">{{$t('qwbxm')}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
	export default {
		data() {
			return {
				tokenName:'USDT充值',
				token:'USDT',
				currentIndex: 0,
				userData: {},
				qrVal: '', //二维码内容
				src: '', //二维码图片
				selectShow: false,
				selectList: [],
			}
		},
		filters:{
			formatAddress(val,num=12){
			    if(!val) return '-';
			    return val.substring(0,num)+'.....'+val.substring(val.length-num)
			}
		},
		components: {
			tkiQrcode
		},
		computed: {
			...mapState(['userInfo']),
			defaultValue(){
				let val = 0;
				for (let i = 0; i < this.selectList.length; i++) {
				    if (this.tokenName == this.selectList[i]['label']) {
						val=i;
				        break
				    }
				}
				return [val];
			}
		},
		onLoad(e) {
			console.log(e)
			this.tokenName = e.tokenName
		},
		onShow() {
			this.indexData();
		},
		methods: {
			selectOk(e) {
				console.log('币种', e[0].value)
				this.tokenName = e[0].value;
				this.indexData()
			},
			// 二维码生成的图片base64或图片临时地址
			qrR(res) {
				this.src = res;
			},
			downCode() { /*保存图片*/
				var that = this;
				uni.showLoading({
					title: this.$t('bcz'),
					mask: true
				});
				uni.saveImageToPhotosAlbum({
					filePath: that.src,
					success() {
						uni.hideLoading()
						that.$utils.toast(this.$t('bccg'))
					},
					fail() {
						uni.hideLoading()
						that.$utils.toast(this.$t('bcsb'))
					}
				})
			},
			indexData() {
				this.$api.userApi.getDepositAddr({
					chainName:this.tokenName
				}).then(res => {
					this.userData = res.data;
					console.log(res.data)
					var arr =[]
					for(var i=0;i < res.data.chainNameList.length;i++){
						arr.push({value: res.data.chainNameList[i],label:res.data.chainNameList[i],index:i});
					}
					this.selectList = arr;
				})
			},
			submit() {
				this.$utils.copy(this.userData.chainAddr)
			}
		}
	}
</script>

<style lang="scss">
	.tom-container {
		flex: 1;
		overflow: auto;
		background-color: #fff;
	}

	.Tab-main {
		padding: 40rpx 40rpx 0 40rpx;

		/**/
		.listtype {
			background-color: #F7F6FB;
			height: 86rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;

			.left {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}

			.right {
				color: $text-color;
				display: flex;
				align-items: center;
			}

		}

		.Chainname {
			.left {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				margin: 20rpx 0rpx;
			}

			.right {
				.state {
					min-width: 130rpx;
					color: $text-color;
					border: 2rpx solid $text-color;
					text-align: center;
					padding: 12rpx 30rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					display: inline-block;
				}

				.active {
					background-color: $text-color;
					color: #fff;
				}
			}
		}

		/**/
		.block {
			margin-top: 40rpx;
			margin-bottom: 50rpx;
			padding: 30rpx;
			border-radius: 10rpx;
			box-shadow: 0rpx 4rpx 17rpx 2rpx rgba(230, 230, 230, 0.7);

			.list {
				margin-bottom: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text {
					font-size: 28rpx;
					color: #333;
					margin-right: 20rpx;
					font-weight: 600;
				}

				.block-input {
					display: flex;
					align-items: center;
					flex: 1;
					border-bottom: $tom-text-sub-color 2rpx solid;

					.tips {
						font-size: 20rpx;
						color: $text-color;
						margin-left: 16rpx;
					}
				}

				.shulian {
					font-size: 24rpx;
					flex: 1;
					text-align: left;
					color: $text-color;
				}
			}

			.download {
				background: #EBEDF9;
				border: 2rpx solid #CFD9DA;
				border-radius: 60rpx;
				color: #115BCD;
				display: inline-block;
				margin: 30rpx auto;
				padding: 12rpx 0rpx;
				display: block;
				width: 210rpx;
				text-align: center;
			}

			.img {
				width: 284rpx;
				height: 284rpx;
				margin: 70rpx auto 0rpx auto;
				display: block;
			}

			.block-name {
				color: #333;
				font-size: 42rpx;
				text-align: center;
				font-weight: 700;
				margin-bottom: 40rpx;
			}

			.block-address {
				color: $tom-text-sub-color;
				font-size: 28rpx;
				text-align: center;
				margin-bottom: 40rpx;
			}

		}

		.block2 {
			margin: 0rpx 0rpx 60rpx 0rpx;

			.block2-title {
				color: #4D4D4D;
				font-size: 28rpx;
				font-weight: bold;
			}

			.block2-text {
				color: $text-color;
				font-size: 24rpx;
				margin: 34rpx 0rpx;
			}

			.block2-text2 {
				color: $tom-text-sub-color;
				font-size: 24rpx;
				line-height: 38rpx;
				margin-bottom: 10rpx;
			}
		}
	}
	.block-btn{
		width: 240rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: $text-color;
		color: #fff;
		border-radius: 10rpx;
		margin: 50rpx auto;
		font-weight: bold;
		font-size: 26rpx;
	}
</style>
